<template>
  <view class="index-content">
    <Navbar :hideBtn="true" title="一键接单" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar>
   
    <view class="one-order">
      <view class="one-key" @click="onClick" :loading="loading">
        <view class="one-key-btn">
          <view class="inner"> 一键<br />接单</view>
        </view>
      </view>
    </view>
    <!-- <view class="index-block">
      <view class="index-title">一键接单</view>
      <u-button color="#F9343C" @click="onClick" :loading="loading">一键接单</u-button>
    </view>-->
  </view> 
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import { receiveOrder } from '@/api/order'

export default {
  components: {
    Navbar,
  },
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    onClick() {
      if (!this.$store.state.userInfo) return
      receiveOrder({ workerAccount: this.$store.state.userInfo.userName }).then(() => {
        uni.showToast({ title: '接单成功！', icon: 'none' })
      })
    }
  },
}
</script>

<style lang="scss">
.one-key-btn {
  width: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  height: 200rpx;
  border-radius: 50%;
  background: #ff2121;
  border: 2rpx solid #fff;
  box-shadow: inset 0rpx 0rpx 10rpx 10rpx rgba(255, 91, 90, 1),
    0rpx 0rpx 10rpx 10rpx rgba(255, 91, 90, 0.6);
    animation: expand 2s infinite;
    transition: all 0.5s;
  .inner {
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100rpx;
    width:100rpx;
    text-align: center;
    background: rgb(255, 91, 90);
    border-radius: 50%;
  }
}
@keyframes expand {
  0% {
    box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(255, 91, 90, 1);
  }
  // 50% {
  //   box-shadow: 0 0 50rpx 25rpx rgba(255, 0, 0, 0);
  // }
  50% {
    box-shadow: 0 0 50rpx 20rpx rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(255, 91, 90, 1);
  }
}
.index-content {
  background-color: #fff;
  min-height: calc(100vh - var(--window-bottom) - var(--window-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.index-block {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 40rpx 40rpx 300rpx;
  text-align: center;
}

.index-title {
  margin-bottom: 200rpx;
}
</style>